<template>
    <div class="doctorreviewedit">
        <Row>
            <Col class="padding-t padding-b" :xs="24">{{editTt}}</Col>
        </Row>
        <Form ref="formInline" :model="info" :rules="infoRules" inline>
            <Row>
                <Col :xs="3" class="text-r">
                    <i class="req-icon">*</i>服务包名称：
                </Col>
                <Col :xs="21">
                    {{info.itemName}}
                </Col>
            </Row>
            <Row>
                <Col :xs="3" class="text-r">
                    <i class="req-icon"></i>服务包状态：
                </Col>
                <Col :xs="21">
                    <FormItem prop="numberYear">
                        <Select class="w-select" v-model="info.pattern" disabled style='width:150px;'>
                            <Option
                                v-for="(item,index) of formStatusList"
                                :value="index+1"
                                :key="index"
                                style='text-align:center;'
                            >{{ item }}</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
            <Row v-if='info.pattern==2'>
                <Col :xs="3" class="text-r">
                    <i class="req-icon"></i>服务包类型：
                </Col>
                <Col :xs="21">
                    <FormItem prop="numberYear">
                        <Select class="w-select" v-model="info.nature" disabled style='width:150px;'>
                            <Option
                                v-for="(item,index) of natureList"
                                :value="index"
                                :key="index"
                                style='text-align:center;'
                            >{{ item }}</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col :xs="3" class="text-r">
                    <i class="req-icon"></i>是否启用：
                </Col>
                <Col :xs="21">
                    <FormItem prop="name">
                        <iSwitch v-model="info.packagestatus" disabled :true-value="1" :false-value="0">
                            <span slot="open">是</span>
                            <span slot="close">否</span>
                        </iSwitch>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col :xs="3" class="text-r">
                    <i class="req-icon"></i>&nbsp;
                </Col>
                <Col :xs="21">
                    <FormItem prop="paytype">
                        <Input
                            class="w-input"
                            v-model="info.provinceName"
                            :maxlength="60"
                            disabled
                            placeholder="省"
                        />
                        <Input
                            class="w-input"
                            v-model="info.cityName"
                            :maxlength="60"
                            disabled
                            placeholder="市"
                        />
                        <Input
                            class="w-input"
                            v-model="info.areaName"
                            :maxlength="60"
                            disabled
                            placeholder="区"
                        />
                        <Input
                            class="w-input"
                            v-model="info.hospitalName"
                            :maxlength="60"
                            disabled
                            placeholder="机构"
                        />
                        <iSwitch
                            disabled
                            v-if="info.hospitalId != '' && info.hospitalId != null && info.hospitalId != 0"
                            v-model="info.ascription"
                            :true-value="0"
                            :false-value="1"
                            size="large"
                        >
                            <span slot="open">公有</span>
                            <span slot="close">私有</span>
                        </iSwitch>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col offset="3" :xs="9">
                    <h2 class="text-c">可选服务项目</h2>
                    <Table border class="m-table" :columns="allCol" :data="allData"></Table>
                    <Page
                        :total="count"
                        size="small"
                        :current="pageNo"
                        :page-size="pageSize"
                        @on-change="loadPage"
                        style='text-align:center;margin:4px 0;'
                    />
                </Col>
                <Col offset="2" :xs="9">
                    <h2 class="text-c">已选服务项目</h2>
                    <Table border class="m-table" :columns="selCol" :data="selData"></Table>
                </Col>
            </Row>
            <br>
            <Row>
                <Col offset="3" :xs="20" class="text-l">
                    <Button size="large" type="default" @click="reback">
                        <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>返回
                    </Button>
                </Col>
            </Row>
        </Form>
        <Modal
            title="服务项目详情："
            v-model="modalStatus"
            class-name="vertical-center-modal"
            :footer-hide="true"
        >
            <Row>
                <Col :xs="6" class="text-r">
                    <i class="req-icon"></i>服务项目类型：
                </Col>
                <Col :xs="18">{{detail.nature}}</Col>
            </Row>
            <Row>
                <Col :xs="6" class="text-r">
                    <i class="req-icon"></i>服务项目归属：
                </Col>
                <Col :xs="18">
                    {{detail.province}}
                    &nbsp;&nbsp;
                    {{detail.city}}
                    &nbsp;&nbsp;
                    {{detail.area}}
                    &nbsp;&nbsp;
                    {{detail.hospital}}
                    &nbsp;&nbsp;
                    <span
                        v-if="detail.hospitalId"
                    >{{detail.ascription}}</span>
                </Col>
            </Row>
            <Row>
                <Col :xs="6" class="text-r">
                    <i class="req-icon"></i>服务项目名称：
                </Col>
                <Col :xs="18">{{detail.serviceName}}</Col>
            </Row>
            <Row>
                <Col :xs="6" class="text-r">
                    <i class="req-icon"></i>操作规范：
                </Col>
                <Col :xs="18">{{detail.serviceDes}}</Col>
            </Row>
            <Row>
                <Col :xs="6" class="text-r">
                    <i class="req-icon"></i>年服务次数：
                </Col>
                <Col :xs="18">{{detail.numberYear}}次</Col>
            </Row>
            <Row>
                <Col :xs="6" class="text-r">
                    <i class="req-icon"></i>执行机构/医生：
                </Col>
                <Col :xs="18">{{executingAgencyList[detail.executingAgency]}}</Col>
            </Row>
            <Row>
                <Col :xs="6" class="text-r">
                    <i class="req-icon"></i>服务价格：
                </Col>
                <Col :xs="18">￥{{detail.amt}}</Col>
            </Row>
            <Row>
                <Col :xs="6" class="text-r">
                    <i class="req-icon"></i>实收金额：
                </Col>
                <Col :xs="18">￥{{detail.amountReceived}}</Col>
            </Row>
            <Row>
                <Col :xs="6" class="text-r">
                    <i class="req-icon"></i>自付金额：
                </Col>
                <Col :xs="18">￥{{detail.residentowncost}}</Col>
            </Row>
            <Row>
                <Col :xs="6" class="text-r">
                    <i class="req-icon"></i>政府补贴：
                </Col>
                <Col :xs="18">￥{{detail.governmentsubsidycost}}</Col>
            </Row>
            <Row>
                <Col :xs="6" class="text-r">
                    <i class="req-icon"></i>是否启用：
                </Col>
                <Col :xs="18">{{detail.packagestatus}}</Col>
            </Row>
            <Row>
                <Col :xs="6" class="text-r">
                    <i class="req-icon"></i>备注：
                </Col>
                <Col :xs="18">{{detail.remarks}}</Col>
            </Row>
        </Modal>
    </div>
</template>
<script>
import api from "@/api/commonApi";
import code from "@/configs/base.js";
import cookie from "@/utils/cookie.js";
export default {
    data() {
        return {
            id: null,
            info: {
                itemName: null,
                areaId: null,
                cityId: null,
                hospitalId: null,
                id: null,
                packageItemsIds: null,
                provinceId: null,
                packagestatus: 1,
                ascription: 1,
                pattern: null,
                nature: null,
            },

            formStatusList:["私人团队签约",'家医团队签约','院后随访签约'],

            detail: {},
            natureList: ["", "增值付费项目", "基本公共卫生服务承担项目"],
            executingAgencyList: ["", "服务中心", "签约医院"],

            tmpProvinceList: [],
            tmpCityList: [],
            tmpAreaList: [],
            tmpHospitalList: [],

            provinceList: [],
            provinceStatus: true,
            cityList: [],
            cityStatus: true,
            areaList: [],
            areaStatus: true,
            hospitalList: [],
            hospitalStatus: true,
            province: "0",
            city: "0",
            area: "0",
            hospitalId: "",
            type: null,
            infoRules: {
                itemName: [
                    {
                        required: true,
                        message: "服务包名称不能为空",
                        trigger: "blur"
                    }
                ]
            },
            switch1: false,
            searchKey: '',

            identity: null,
            identityCoding: null,
            ownArea: null,

            count: 0,
            pageSize: 10,
            pageNo: 1,
            listPageNo: null,

            modalStatus: false,

            allCol: [
                {
                    title: "服务项",
                    key: "serviceName",
                    align: "center"
                },
            ],
            selCol: [
                {
                    title: "服务项",
                    key: "serviceName",
                    align: "center"
                },
            ],
            allData: [],
            selData: [],

            province: null,
            city: null,
            area: null,
            hospital: null,
            isBack: 2,
            provinceName: "",
            cityName: "",
            areaName: "",
            hospitalName: "",
        };
    },
    created() {
        this.province = this.$route.query.province
            ? parseInt(this.$route.query.province)
            : null;
        this.city = this.$route.query.city
            ? parseInt(this.$route.query.city)
            : null;
        this.area = this.$route.query.area
            ? parseInt(this.$route.query.area)
            : null;
        this.hospital = this.$route.query.hospital
            ? this.$route.query.hospital
            : null;

        let id = parseInt(this.$route.query.id);
        this.type = this.$route.query.type
            ? parseInt(this.$route.query.type)
            : null;
        this.tabId = parseInt(this.$route.query.tabId);
        this.listPageNo = parseInt(
            this.$route.query.pageNo ? this.$route.query.pageNo : 1
        );
        this.tabList = this.healthEducationSontab;

        this.identity = cookie.getCookie("idtt");
        this.identityCoding = cookie.getCookie("idttC");
        this.ownArea = JSON.parse(cookie.getCookie("ownArea"));        
        this.editTt = `服务包详情信息`;
        this.id = id;
        this.$axios
            .post(api.getervicePackagById, { id: this.id })
            .then(resp => {
                if (resp.data.success) {
                    this.info = resp.data.object;
                    for (let item of this.info.itemsList) {
                        this.selData.push({
                            id: item.itemsId,
                            serviceName: item.itemName
                        });
                    }
                    this.info.ascription = parseInt(this.info.ascription)
                    this.info.provinceId = this.info.provinceId;
                    this.provinceName = this.info.provinceName
                    this.areaName = this.info.areaName
                    this.cityName = this.info.cityName
                    this.hospitalName = this.info.hospitalName
                    this.info.hospitalId = this.info.hospitalId
                    if (this.info.provinceId) {
                        this.cityList = this.$store.getters.getCityList(
                            this.info.provinceId
                        );
                    }
                    if (this.info.cityId) {
                        this.areaList = this.$store.getters.getAreaList(
                            this.info.cityId
                        );
                    }
                    this.loadPage(1);
                } else {
                    console.log("查询失败");
                }
            })
            .catch(err => {
                console.log(err);
            });

        if (isNaN(id)) this.loadPage(1);

        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/operation/servicePackage/pindex",
                title: "签约服务包"
            },
            {
                path: "/index/operation/servicePackage/pList",
                title: "签约服务包"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    methods: {
        loadPage(pageNo) {
            this.pageNo = pageNo;
            var params = {};
            params.provinceId = parseInt(
                this.info.provinceId == 0 ? null : this.info.provinceId
            );
            if (params.provinceId) {
                params.cityId = parseInt(
                    this.info.cityId == 0 ? null : this.info.cityId
                );
                params.areaId = null;
                params.hospitalId = null;
            } else {
                params.cityId = null;
            }
            if (params.cityId) {
                params.areaId = parseInt(
                    this.info.areaId == 0 ? null : this.info.areaId
                );
                params.hospitalId = null;
            } else {
                params.areaId = null;
            }
            if (params.areaId) {
                params.hospitalId = parseInt(
                    this.info.hospitalId == 0 || this.info.hospitalId == ""
                        ? null
                        : this.info.hospitalId
                );
            } else {
                params.hospitalId = null;
            }
            params.searchKey = this.searchKey.trim() == "" ? null : this.searchKey.trim();
            params.pageNo = pageNo;
            params.pageSize = this.pageSize;
            this.$axios
                .post(api.getfFdsItemsPage, params)
                .then(resp => {
                    this.count = resp.data.object.total;
                    this.allData = resp.data.object.records;
                })
                .catch(err => {
                    console.log(err);
                });
        },
        reback() {
            if (this.type) {
                //   公用方法
                this.functionJS.queryNavgationTo(
                    this,
                    "/index/organizat/contentmen/servicepackage/list",
                    {
                        province: this.province,
                        city: this.city,
                        area: this.area,
                        hospital: this.hospital,
                        isBack: 2
                    }
                );
            } else {
                //   公用方法
                this.functionJS.queryNavgationTo(
                    this,
                    "/index/directory/servicePackage/list",
                    {
                        pageNo: this.listPageNo,
                        province: this.province,
                        city: this.city,
                        area: this.area,
                        hospital: this.hospital,
                        isBack: 2
                    }
                );
            }
        },
    }
};
</script>
<style lang="less" scoped>
.doctorreviewedit {
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .padding-t {
        padding-top: 15px;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
    }
    .padding-b {
        padding-bottom: 15px;
    }
    .text-l{
        text-align: center;
    }
    .w-select {
        width: 100px;
    }
    .w-select-hos {
        width: 200px;
    }
    .w-input {
        width: 200px;
    }
    .req-icon {
        font-size: 18px;
        color: red;
        display: inline-block;
        height: 18px;
        width: 18px;
        text-align: center;
        line-height: 18px;
        vertical-align: middle;
    }
    .text-r {
        text-align: right;
    }
    .text-c {
        text-align: center;
    }
}
</style>
